<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Calendar, Tools, Warning, User, Star, TrendCharts } from '@element-plus/icons-vue'
import { getEmployeeDeptJobApi, getPendingMaintenanceCountApi, getPendingRepairCountApi, getCompletedMaintenanceCountApi, getCompletedRepairCountApi } from '@/api/emp'

// 员工信息
const employeeInfo = ref({})

// 工作统计数据
const statistics = ref({
  pendingMaintenances: 0,
  pendingRepairs: 0,
  completedToday: 0,
  customerSatisfaction: 92
})

// 快捷操作按钮
const quickActions = [
  { name: '新增预约', icon: Calendar, route: '/employee/maintenance' },
  { name: '客户查询', icon: User, route: '/employee/customer' },
  { name: '车辆查询', icon: Tools, route: '/employee/cars' },
  { name: '满意度调查', icon: Star }
]

onMounted(async () => {
  // 获取员工信息
  const loginUser = JSON.parse(localStorage.getItem('loginUser'))
  if (loginUser) {
    employeeInfo.value = {
      name: loginUser.name,
      deptName: loginUser.department || '售后服务部',
      jobName: loginUser.position || '服务顾问'
    }
    
    try {
      // 并行获取所有统计数据
      const [deptJobData, pendingMaintenanceData, pendingRepairData, completedMaintenanceData, completedRepairData] = await Promise.all([
        getEmployeeDeptJobApi(loginUser.id),
        getPendingMaintenanceCountApi(loginUser.name),
        getPendingRepairCountApi(loginUser.name),
        getCompletedMaintenanceCountApi(loginUser.name),
        getCompletedRepairCountApi(loginUser.name)
      ])
      
      // 处理部门和职位信息
      if (deptJobData.code === 1 && deptJobData.data) {
        employeeInfo.value.deptName = deptJobData.data.deptName || employeeInfo.value.deptName
        employeeInfo.value.jobName = deptJobData.data.jobName || employeeInfo.value.jobName
      }
      
      // 处理待处理保养数量
      if (pendingMaintenanceData.code === 1) {
        statistics.value.pendingMaintenances = pendingMaintenanceData.data || 0
      } else {
        ElMessage.error(pendingMaintenanceData.msg || '获取待处理保养数量失败')
      }
      
      // 处理待处理维修数量
      if (pendingRepairData.code === 1) {
        statistics.value.pendingRepairs = pendingRepairData.data || 0
      } else {
        ElMessage.error(pendingRepairData.msg || '获取待处理维修数量失败')
      }
      
      // 处理已完成保养数量
      let completedMaintenance = 0
      if (completedMaintenanceData.code === 1) {
        completedMaintenance = completedMaintenanceData.data || 0
      } else {
        ElMessage.error(completedMaintenanceData.msg || '获取已完成保养数量失败')
      }
      
      // 处理已完成维修数量
      let completedRepair = 0
      if (completedRepairData.code === 1) {
        completedRepair = completedRepairData.data || 0
      } else {
        ElMessage.error(completedRepairData.msg || '获取已完成维修数量失败')
      }
      
      // 计算总完成数据
      statistics.value.completedToday = completedMaintenance + completedRepair
      
    } catch (error) {
      ElMessage.error('获取统计数据异常：' + error.message)
      console.error('获取统计数据失败：', error)
    }
  } else {
    ElMessage.error('未找到员工信息')
  }
})
</script>

<template>
  <div class="employee-dashboard">
    <!-- 欢迎区域 -->
    <div class="welcome-section">
      <el-card shadow="hover" class="welcome-card">
        <div class="welcome-content">
          <h2>欢迎回来，{{ employeeInfo.name }}！</h2>
          <p class="welcome-desc">{{ employeeInfo.deptName }} | {{ employeeInfo.jobName }}</p>
          <p class="current-time">{{ new Date().toLocaleDateString() }}</p>
        </div>
      </el-card>
    </div>

    <!-- 快捷操作区域 -->
    <div class="quick-actions">
      <el-row :gutter="20" type="flex" justify="space-between">
        <el-col v-for="(action, index) in quickActions" :key="index" :span="6">
          <el-card shadow="hover" class="action-button" @click="$router.push(action.route)">
            <div class="action-content">
              <div class="action-icon" :class="action.name.replace(/\s/g, '-').toLowerCase() + '-icon'">
                <el-icon><component :is="action.icon" /></el-icon>
              </div>
              <p>{{ action.name }}</p>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 数据统计卡片 -->
    <div class="stats-section">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card shadow="hover" class="stat-card maintenance-stat">
            <div class="stat-icon">
              <el-icon class="icon-large"><Tools /></el-icon>
            </div>
            <div class="stat-info">
              <h3>{{ statistics.pendingMaintenances }}</h3>
              <p>待处理保养</p>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="hover" class="stat-card repair-stat">
            <div class="stat-icon">
              <el-icon class="icon-large"><Warning /></el-icon>
            </div>
            <div class="stat-info">
              <h3>{{ statistics.pendingRepairs }}</h3>
              <p>待处理维修</p>
            </div>
          </el-card>
        </el-col>
      </el-row>
      
      <el-row :gutter="20" style="margin-top: 20px;">
        <el-col :span="12">
          <el-card shadow="hover" class="stat-card completed-stat">
            <div class="stat-icon">
              <el-icon class="icon-large"><TrendCharts /></el-icon>
            </div>
            <div class="stat-info">
              <h3>{{ statistics.completedToday }}</h3>
              <p>总完成</p>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="hover" class="stat-card satisfaction-stat">
            <div class="stat-icon">
              <el-icon class="icon-large"><Star /></el-icon>
            </div>
            <div class="stat-info">
              <h3>{{ statistics.customerSatisfaction }}%</h3>
              <p>客户满意度</p>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<style scoped>
.employee-dashboard {
  font-family: 'Arial', sans-serif;
  padding: 20px;
}

.welcome-section {
  margin-bottom: 30px;
}

.welcome-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.welcome-content h2 {
  margin: 0 0 10px 0;
  color: #333;
}

.welcome-desc {
  color: #666;
  margin: 0 0 10px 0;
}

.current-time {
  color: #999;
  margin: 0;
}

.welcome-image {
  margin-left: 30px;
}

.stats-section {
  margin-bottom: 30px;
}

.stat-card {
  display: flex;
  align-items: center;
  padding: 20px;
  height: 120px;
  transition: transform 0.2s;
}

.stat-card:hover {
  transform: translateY(-5px);
}

.stat-icon {
  font-size: 48px;
  margin-right: 20px;
}

.maintenance-stat .stat-icon {
  color: #3498db;
}

.repair-stat .stat-icon {
  color: #e74c3c;
}

.completed-stat .stat-icon {
  color: #2ecc71;
}

.satisfaction-stat .stat-icon {
  color: #f39c12;
}

.stat-info h3 {
  margin: 0;
  font-size: 32px;
  color: #333;
}

.stat-info p {
  margin: 5px 0 0 0;
  color: #666;
}

.quick-actions {
  margin-bottom: 30px;
}

.action-button {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  min-height: 40px;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.action-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.action-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
}

.action-button .action-icon {
  font-size: 18px;
  margin-right: 8px;
  margin-bottom: 0;
}

.新增预约-icon {
  color: #4e73df;
}

.客户查询-icon {
  color: #1cc88a;
}

.车辆查询-icon {
  color: #36b9cc;
}

.满意度调查-icon {
  color: #f6c23e;
}

.action-button p {
  margin: 0;
  color: #333;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>